<template>
	<view>
		<view class="EssentialInformation">
			已有6523515人完成该项信息后成功下款
		</view>
		<view class="EssentialInformationHome">
			家庭信息
		</view>
		<view class="EssentialInformationHomeChoice" style="margin-top: 20rpx;" @click="EssentialInformation(1)">
			<text style="float: left;margin-right: 100rpx;">婚姻</text>
			<text v-if="Address2 != ''" style="display: inline-block;width: 400rpx;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{Address2}}</text>
			<text v-if="Address2 == ''" style="font-size: 32rpx;font-weight: 400;color: #CCCCCC;">请选择</text>
			<lb-picker @confirm="HandleConfirmMarriage" ref="Marriage" :list="list2"></lb-picker>
			<image src="../../static/bottom.png" class="SupplementHeadImg" mode=""></image>
		</view>
		<view class="EssentialInformationHomeChoice" @click="EssentialInformation(2)">
			<text style="float: left;margin-right: 41rpx;">住宅地址</text>
			<text v-if="address != ''" style="display: inline-block;width: 400rpx;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{address}}</text>
			<text v-if="address == ''" style="font-size: 32rpx;font-weight: 400;color: #CCCCCC;">请选择</text>
			<lb-picker @confirm="handleConfirm" ref="picker" mode="multiSelector" :level="3" :list="list"></lb-picker>
			<image src="../../static/bottom.png" class="SupplementHeadImg" mode=""></image>
		</view>
		<view class="EssentialInformationHomeChoice">
			<input type="text" style="box-sizing: border-box;padding-left: 165rpx;" value="" v-model="detail_address" placeholder="请输入详细地址" />
		</view>
		<view class="EssentialInformationHome">
			职业信息
		</view>
		<view class="EssentialInformationHomeChoice" style="margin-top: 20rpx;" @click="EssentialInformation(3)">
			<text style="float: left;margin-right: 100rpx;">学历</text>
			<text v-if="Address3 != ''" style="display: inline-block;width: 400rpx;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{Address3}}</text>
			<text v-if="Address3 == ''" style="font-size: 32rpx;font-weight: 400;color: #CCCCCC;">请选择</text>
			<lb-picker @confirm="HandleConfirmEducation" ref="Education" :list="Education"></lb-picker>
			<image src="../../static/bottom.png" class="SupplementHeadImg" mode=""></image>
		</view>
		<view class="EssentialInformationHomeChoice">
			<text style="float: left;margin-right: 41rpx;">公司名称</text>

			<input type="text" style="box-sizing: border-box;" value="" v-model="company_name" placeholder="请输入公司名称" />

		</view>
		<view class="EssentialInformationHomeChoice" @click="EssentialInformation(4)">
			<text style="float: left;margin-right: 41rpx;">公司地址</text>
			<text v-if="marriage != ''" style="display: inline-block;width: 400rpx;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{marriage}}</text>
			<text v-if="marriage == ''" style="font-size: 32rpx;font-weight: 400;color: #CCCCCC;">请选择</text>
			<lb-picker @confirm="handleConfirm2" ref="picker2" mode="multiSelector" :level="3" :list="list"></lb-picker>
			<image src="../../static/bottom.png" class="SupplementHeadImg" mode=""></image>
		</view>
		<view class="EssentialInformationHomeChoice">

			<input type="text" style="box-sizing: border-box;padding-left: 165rpx;" v-model="company_detail_address" value="" placeholder="请输入详细地址" />

		</view>
		
		<view class="IncreaseInformationBottom">
			<view class="IncreaseInformationBottomInput" @click="UserSubmit()">
				提交
			</view>
			<view style="font-size: 24rpx;font-family: PingFang SC;font-weight: 400;color: #888888;margin-top: 10rpx;">
				信息仅用做审批借款额度，将加密保障您的信息安全
			</view>
		</view>
	</view>
</template>

<script>
	 import LbPicker from '@/components/lb-picker'
	 import {VUE_API_URL} from "@/components/pulugins/index"
	export default {
		components: {
			LbPicker
		},
		data() {
			return {
				list: [],	//地址选择
				list2:[],	//选择婚姻
				address:'',		//个人地址
				Address2:'',	//婚姻
				Address3:'',	//学历
				token:'',
				marriage:'',//公司地址
				Education:'',//选择学历
				marriageInt:0,	//婚姻id
				education:0,	//学历id
				detail_address:'',		//住宅详细地址
				company_name:'',		//公司名称
				company_detail_address:''		//公司详细地址
			}
		},
		computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
		onShow(){
			var that = this;
			that.token = uni.getStorageSync('token');
			this.MapFunction();
			this.ApiPremise();
		},
		onLoad() {
			var that = this;
			that.token = uni.getStorageSync('token');
			this.MapFunction();
			this.ApiPremise();
		},
		mounted() {
			
		},
		methods: {
			handleConfirm (e) {				//住宅地址
			  var that = this;
			  console.log(e) 

			  that.address = e.item[0].label + e.item[1].label + e.item[2].label

			},
			handleConfirm2 (e) {			//公司地址
				var that = this;
			    console.log(e)
			    that.marriage = e.item[0].label + e.item[1].label + e.item[2].label
			},
			detailAddress(e){
				var that = this;
				// console.log(e);
				that.detailAddressValue = e.target.value;
				console.log(that.detailAddressValue);
			},
			companyName(e){
				var that = this;
				// console.log(e);
				that.CompanyNameValue = e.target.value;
				console.log(that.CompanyNameValue);
			},
			detailAddressCompany(e){
				var that = this;
				// console.log(e);
				that.detailAddressCompanyValue = e.target.value;
				console.log(that.detailAddressCompanyValue);
			},
			HandleConfirmMarriage(e){		//婚姻
				var that = this;
				console.log(e) 
				that.Address2 = e.item.label;
				that.marriageInt = e.item.value;
			},
			HandleConfirmEducation(e){		//学历
				var that = this;
				console.log(e)
				that.Address3 = e.item.label;
				that.education = e.item.value;
			},
			EssentialInformation(index){
				if(index == 1){
					this.$refs.Marriage.show() // 显示
				}else if(index == 2){
					this.$refs.picker.show() // 显示
				}else if(index == 3){
					this.$refs.Education.show()
				}else if(index == 4){
					this.$refs.picker2.show() // 显示
				}
			},
			ApiPremise(){			//弹窗内容
			    var that = this;
			    uni.request({
			        url: VUE_API_URL + 'premise', 
			    	method:'POST',
			        data: {
			            
			        },
			        header: {
			            'Authori-zation': 'Bearer ' + that.token //自定义请求头信息
			        },
			        success: (res) => {
			    		console.log(res.data.data);
						let data = res.data.data;
						that.list2 = data.marriage;
						that.Education = data.education;
						console.log(that.list2)
			        }
			    });	
			},
			MapFunction(){				//地图
				var that = this;
				this.$H.get('map', {
					
				}, {
					native: false
				}).then(res => {
					that.list = res.data;
					console.log(that.list)
				})
			},
			UserSubmit(){
				var that = this;
				uni.request({
				    url: VUE_API_URL + 'user/submit', 
					method:'POST',
				    data: {
				        type:2,

						marriage:that.marriageInt,			//婚姻状况
						address:that.address,				//住宅地址
						detail_address:that.detail_address, //住宅详细地址
						education:that.education,			//学历id
						company_name:that.company_name,				//公司名称
						company_address:that.marriage,				//公司地址
						company_detail_address:that.company_detail_address		//公司详细地址
						// address:
				    },
				    header: {
				        'Authori-zation': 'Bearer ' + that.token //自定义请求头信息
				    },
				    success: (res) => {
						console.log(res.data.msg);
						uni.showToast({
						    title: res.data.msg,
							icon:'none',
						    duration: 2000
						});
				    },
				});	
			},
		},
	}
</script>

<style>
	.IncreaseInformationBottomInput{
		width: 650rpx;
		height: 95rpx;
		background: linear-gradient(-84deg, #DFBA94, #DFAE7C);
		box-shadow: 1rpx 3rpx 10rpx 0px rgba(0, 0, 0, 0.16);
		border-radius: 48rpx;
		line-height: 95rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		margin: auto;
	}
	.IncreaseInformationBottom{
		width: 100%;
		background: #FFFFFF;
		padding-top: 20rpx;
		padding-bottom: 30rpx;
		text-align: center;
		position: fixed;
		bottom: 0;
	}
	page{
		background: #F8F8F8;
	}
	.SupplementHeadImg{
		width: 33rpx;
		height: 18rpx;
		float: right;
		position: absolute;
		top: 40rpx;
		right: 50rpx;
	}
	.EssentialInformationHomeChoice{
		width: 100%;
		height: 100rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		padding: 0 50rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #F8F8F8;
		background: #FFFFFF;
		position: relative;
		padding-top: 30rpx;
		box-sizing: border-box;
		
	}
	.EssentialInformation{
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		background: #FBE5CE;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #DFAF80;
		padding-left: 30rpx;
		box-sizing: border-box;
	}
	.EssentialInformationHome{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #888888;
		margin-top: 46rpx;
		margin-left: 50rpx;
	}
		..uni-input-placeholder{
			color: rgb(204, 204, 204) !important;
		}
</style>
